<template>
    <view class="container">
        <view class="group_item" style="padding: 16rpx 0 32rpx 30rpx; font-size: 32rpx; ">
              基本信息
        </view>
        <view class="group_item">
            <view class="group_title">
                姓名：
            </view>
            <input type="text" v-model="egressRecord.name" placeholder="请输入登记人姓名" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
               性别：
            </view>
            <view class="picker_class">
            <radio-group @change="radioChange" v-model="egressRecord.sex">
                <label class="radio"><radio color="#33D6A6;" value="男" checked="true" style="transform: scale(0.6);"/>男</label>
				<label class="radio"><radio color="#33D6A6;" value="女" style="transform: scale(0.6);margin-left:10upx"/>女</label>
            </radio-group>
            </view>
        </view>
        <view class="group_item">
            <view class="group_title">
                民族：
            </view>
            <input type="idcard" v-model="egressRecord.nation" placeholder="请输入民族" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                出生年月：
            </view>
            <input type="text" v-model="egressRecord.year" placeholder="请选择出生年月" class="picker_class" @click="showDateTime"/>
        </view>
        <view class="group_item">
            <view class="group_title">
				婚姻状况：
            </view>
         <view class="picker_class">
         <radio-group @change="radioChange" v-model="egressRecord.marry">
            <label class="radio"><radio color="#33D6A6;" value="未婚" checked="true" style="transform: scale(0.6);"/>未婚</label>
         	<label class="radio"><radio color="#33D6A6;" value="已婚" style="transform: scale(0.6);margin-left:10upx"/>已婚</label>
			<label class="radio"><radio color="#33D6A6;" value="离异" style="transform: scale(0.6);margin-left:10upx"/>离异</label>
         </radio-group>
         </view>
        </view>
		<view class="group_item">
		    <view class="group_title">
				文化程度：
		    </view>
		  <input type="idcard" v-model="egressRecord.education" placeholder="请输入文化程度" class="picker_class" /> 
		</view>
		<view class="group_item">
		    <view class="group_title">
		        现居住地址：
		    </view>
		    <input type="text" v-model="egressRecord.address" placeholder="请输入现居住地址" class="picker_class"/>
		</view>
		<view class="group_item">
		    <view class="group_title">
		        户籍所在地址：
		    </view>
		    <input type="text" v-model="egressRecord.inputTarget" placeholder="请选择户籍地址" class="picker_class" @click="showTarget"/>
		</view>
		<view class="group_item">
		    <view class="group_title">
		        身份证号码：
		    </view>
		    <input type="idcard" v-model="egressRecord.identitCard" placeholder="请输入身份证" class="picker_class" />
		</view>
        <view class="group_item">
            <view class="group_title">
                联系电话：
            </view>
            <input type="idcard" v-model="egressRecord.phone" placeholder="请输入联系电话" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
				是否就/失业登记：
            </view>
			<view class="picker_class">
			<radio-group @change="radioChange" v-model="egressRecord.hasJob">
			    <label class="radio"><radio color="#33D6A6;" value="已就业" checked="true" style="transform: scale(0.6);"/>已就业</label>
				<label class="radio"><radio color="#33D6A6;" value="失业" style="transform: scale(0.6);margin-left:10upx"/>失业</label>
			</radio-group>
			</view>
        </view>
		<view class="group_item">
		    <view class="group_title">
				就业经历：
		    </view>
		  <input type="idcard" v-model="egressRecord.jobExperience" placeholder="请输入就业经历" class="picker_class" /> 
		</view>
		
		<view class="group_item">
		    <view class="group_title">
				有无其他生活来源：
		    </view>
			<view class="picker_class">
			<radio-group @change="radioChange" v-model="egressRecord.otherJobs">
			    <label class="radio"><radio color="#33D6A6;" value="有" checked="true" style="transform: scale(0.6);"/>有</label>
				<label class="radio"><radio color="#33D6A6;" value="无" style="transform: scale(0.6);margin-left:10upx"/>无</label>
			</radio-group>
			</view>
		</view>
		
        <view class="group_upload">
            <view>
				<view style="margin-top: 32rpx;">
					  附件上传:
				</view>

                <robby-image-upload v-model="imageUrlList" fileKeyName="files" :header="header" :formData="formData"
                :server-url="uploadUrl" :showUploadProgress="true" limit="6"></robby-image-upload>
				<view class="">
					<view class="sign">
						<view>
						    电子签名:
						</view>
					<button  class="button_class1" @click="navTo('/package_biz/pages/declare/qm')" >点击签名</button>	
					</view>
					    <button type="primary" class="button_class" @click="addRegistration">提交</button>
				</view>
								
            </view>
			
        </view>

        <view>
            <wPicker
                    mode="dateTime"
                    @confirm="confirmDate"
                    ref="dateTime"
                    themeColor="#f00"
                    :current="true"
            ></wPicker>
            <wPicker
                    mode="region"
                    @confirm="confirmTarget"
                    ref="targetRegion"
                    themeColor="#f00"
                    :defaultVal="defaultSourceRegion"
                    :hideArea="false"
            ></wPicker>
        </view>
    </view>
</template>

<script>
    import wPicker from "@/components/w-picker/w-picker.vue";
    import {
        mapState,
        mapMutations
    } from 'vuex';
	
    export default {
		components: {
		    wPicker
		},
        data() {
            return {
                egressRecord:{
                    name: '',//姓名
                    sex:'男',//性别
                    nation:'',//民族
                    year:'',//出生年月
                    phone:"",//联系电话
                    identitCard:'',//身份证
                    code:'',//邮编
                    inputIdCard:"",
                    bank:'',//开户银行
                    bankNumber:'',//银行账号
                    inputTime:"",
                    address:'',//居住地址
                    payNumber:'',//个人缴费额
                    inputTarget:"",
					
					// 新增状态数据
					education:'',//文化程度
					marry:'未婚',//婚姻状态
					liveLocation:'',//居住地址
					hasJob:'',//就业情况
					jobExperience:'',//就业经历
					otherJobs:'',//其他生活来源
					bornLocation:'',//户籍所在地
                },
                imageUrlList: [],
                header: {
                    appId: uni.getStorageSync("appId")
                },
                formData: {},
                uploadUrl: this.$api.request.apiBaseUrl + 'checkImg/WXImgSecCheck',
                defaultSourceRegion:["四川省","成都市","武侯区"]
            }
        },
        onLoad() {
		
        },
        methods: {
            navTo(url){
                console.log(url)
                uni.navigateTo({
                    url:url
                })
            },
			 showToast(name){
			                uni.showToast({
			                    title: name,
			                    icon: 'none',
			                    duration: 2000
			                });
			                return
			            },
            addRegistration() {
				// 表单验证
                           if (this.egressRecord.name == "") {
                               this.showToast('请输入姓名')
                           }else if(this.egressRecord.sex == ""){
                               this.showToast('请输入性别')
                           }else if(this.egressRecord.nation == ""){
                               this.showToast('请输入民族')
                           }else if(this.egressRecord.year == ""){
                               this.showToast('请选择出生年月')
                           }else if(this.egressRecord.marry == ""){
                               this.showToast('请选择婚姻状况')
                           }else if(this.egressRecord.education == ""){
                               this.showToast('请输入文化程度')
                           }else if(this.egressRecord.address == ""){
                               this.showToast('请输入居住地')
                           }else if(this.egressRecord.bornLocation == ""){
                               this.showToast('请选择户籍地址')
                           }else if(!this.$api.util.validateIdCardNo(this.egressRecord.identitCard)){
                               this.showToast('请输入正确的身份证号')
                           }else if(!this.$api.util.validateMobileNo(this.egressRecord.phone)){
                               this.showToast('请输入正确的手机号')
                           }else if(this.egressRecord.hasJob == ""){
                               this.showToast('请选择就业情况')
                           }else if(this.egressRecord.jobExperience == ""){
                               this.showToast('请输入就业经历')
                           }else if(this.egressRecord.otherJobs == ""){
                               this.showToast('请选择有无其他生活来源')
                           }else{
                               // this.egressRecord.imageUrl=this.imageUrlList
                               let params =this.egressRecord
                               this.$api.request.startLife(params, (res) => {
                                   if (res.code ==200) {
                                       let verificationId = res.data.verificationId;
                                       if(verificationId == 0){
                                       	// 不需要核验
                                       	this.$api.msg(res.msg)
                                       	setTimeout( () => {
                                       	    uni.navigateBack()
                                       	}, 1000)
                                       }else{
                                       	// 需要核验
                                       	this.$api.msg("添加成功")
                                       	let ownerInfo = {
                                       		name: this.egressRecord.name,
                                       		idCard: this.egressRecord.idCard,
                                               businessKey:res.data.businessKey
                                       	}
                                       	setTimeout( () => {
                                       	    uni.redirectTo({
                                       	    	url: '/package_biz/pages/declare/verification/baidu?ownerInfo=' + JSON.stringify(ownerInfo)
                                       	    })
                                       	}, 1000)
                                       }
                                   } else {
                                       this.$api.msg(res.msg)
                                   }
                               })
                           }
                       },
            radioChange(e){
				let value = e.target.value
				//console.log(value);
				//检测value是哪个单选框的值
				let has_selected_sex = !value.search('男') || !value.search('女')
				let has_selected_marry = !value.search('未婚') || !value.search('已婚') || !value.search('离异')
				let has_selected_hasJob = !value.search('已就业') || !value.search('失业')
				let has_selected_otherJob = !value.search('有') || !value.search('无')
				if(has_selected_sex){
					 this.egressRecord.sex = e.detail.value
					 //console.log('当前保存的性别：',this.egressRecord.sex);
				}else if(has_selected_marry){
					 this.egressRecord.marry = e.detail.value
					// console.log('当前保存的婚姻状态：',this.egressRecord.marry);
				}else if(has_selected_hasJob){
					this.egressRecord.hasJob = e.detail.value
					// console.log('当前保存的是否就业：',this.egressRecord.hasJob);
				}else if(has_selected_otherJob){
					this.egressRecord.otherJobs = e.detail.value
					 //console.log('当前保存的是否有其他生活来源：',this.egressRecord.otherJobs);
				}
               
            },
            showTarget(){
                this.$refs['targetRegion'].show();
            },
            confirmTarget(e){
                this.egressRecord.inputTarget = e.result
				this.egressRecord.bornLocation = e.result
            },
            showDateTime(){
                this.$refs['dateTime'].show();
            },
            confirmDate(e){
                 this.egressRecord.inputTime = e.result
				 this.egressRecord.year = e.result
				 //console.log('这是保存在本地年月日：',this.egressRecord.year);
            }
        },
       
    }
</script>

<style scoped>
    .container {
        width: 100%;
        background-color: #FBFBFB;
        overflow: hidden;
    }
    .group_item {
      /*  width: 100%; */
        padding: 0upx 30upx;
       /* margin: 10upx 0; */
		border: 1px solid #F9F9F9;
        display: flex;
        flex-direction: row;
        background-color: white;
    }
	.group_upload{
		/*  width: 100%; */
		  padding: 0upx 30upx;
		 /* margin: 10upx 0; */
		  border: 1px solid #F9F9F9;
		  background-color: white;
	}

    .group_item1 {
        width: 100%;
        padding: 10upx 30upx;
        margin: 10upx 0;
        background-color: white;
        overflow: hidden;
    }

    .group_title1 {
        width: 230upx;
        font-size: 30upx;
        font-weight: bold;
    }

    .group_title {
        width: 60%;
        padding-top: 30upx;
        /* height: 100upx; */
        /* line-height: 100upx; */
        font-size: 26rpx;
    }
	

    .picker_class {
        width: 100%;
        height: 100upx;
        line-height: 100upx;
        margin-left: 30upx;
        font-size: 28upx;
        padding-left: 10upx;
    }

    .picker_content_class {
        width: 100%;
        height: 200upx;
        margin-top: 30upx;
        margin-left: 30upx;
        font-size: 28upx;
        padding-left: 10upx;
    }

    input {
        padding-left: 10upx;
    }

    .button_class {
        bottom: 40upx;
        margin-top: 180rpx;
        width: 80%;
        height: 64rpx;
        line-height: 64rpx;
        background-color: #33D6A6 !important;
        color: white
    }
    .button_class1 {
		float: right;
        width: 200rpx;
        height: 70upx;
        line-height: 70upx;
        background-color: #33D6A6 !important;
        color: white
    }

</style>
